<script setup>
import {onMounted, ref} from 'vue'
import {useUserStore} from "@/stores/user.js"

const userStore = useUserStore()
const searchForm = ref({
  name: ''
})
const search = () => {
  console.log(searchForm.value)
  if (searchForm.value.name) {
    tableData.value = fuzzySearchInObjects("al", tableData.value, "name")
  } else {
    tableData.value = userStore.userInfo
  }

}
//模糊查询
// 对象数组的模糊查询函数
function fuzzySearchInObjects(query, data, property) {
  const lowerCaseQuery = query.toLowerCase();
  return data.filter(item => item[property].toLowerCase().includes(lowerCaseQuery));
}


// 表格数据
const tableData = ref([
  // {
  //   name: '王小虎',
  //   phone: '123456789',
  //   email: '123456789@qq.com',
  //   address: '上海市普陀区金沙江路 1518 弄'
  // },
])
//表格功能
const handleClick = (title, row) => {

  if (title === '查看') {
    dialogData.value.dialogVisible = true
    dialogData.value.title = "查看用户"
    dialogData.value.disabled = true
    form.value = row
  } else if (title === '编辑') {
    dialogData.value.dialogVisible = true
    dialogData.value.title = "编辑用户"
    dialogData.value.disabled = false
    form.value = row
  } else if (title === '删除') {
    ElMessageBox.confirm(
        '是否确定删除这一项数据?',
        '删除',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
    )
        .then(() => {
          userStore.del(row.id)
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消删除',
          })
        })
  }
}

//分页器
const pageData = ref({
  currentPage: 1,
  pageSize: 10,
  total: 10
})

const handleSizeChange = (val) => {
  console.log(`每页 ${val} 条`)
}
const handleCurrentChange = (val) => {
  console.log(`当前页: ${val}`)
}
//添加按钮
const addUser = () => {
  dialogData.value.dialogVisible = true
  dialogData.value.title = "添加用户"
  dialogData.value.disabled = false
  form.value = {
    name: '',
    email: '',
    address: '',
    password: "",
    phone: '',
    status: 1
  }


}
onMounted(() => {
  console.log('用户管理页面加载')
  tableData.value = userStore.userInfo
})
//==============================弹窗
const dialogData = ref({
  dialogVisible: false,
  title: '',
  disabled: false,
  handleClose: () => {
    dialogData.value.dialogVisible = false
  }
  ,
  handleClick: () => {
    console.log('点击了确定', form.value)
    if (dialogData.value.title === "添加用户") {
      form.value.id = userStore.userInfo.length
      if (userStore.userInfo[userStore.userInfo.length - 1].id !== form.value.id) {
        userStore.increment(form.value)
      }

    } else if (dialogData.value.title === "编辑用户") {
      userStore.edit(form.value)
    }

    dialogData.value.dialogVisible = false
  }

})
//弹窗里面的输入框
const form = ref({
  name: "",
  email: "",
  password: "",
  address: "",
  phone: "",
  status: 1
})
</script>

<template>
  <div class="user">
    <!--  搜索页面-->、
    <div class="user_search">
      <el-input v-model="searchForm.name" placeholder="请输入用户名"></el-input>
      <el-button style="margin-left: 20px" type="primary" @click="search">搜索</el-button>
      <el-button style="margin-left: 20px" type="primary" @click="addUser">增加</el-button>
    </div>
    <!-- 内容部分   -->
    <div class="user_main">
      <div class="user_table">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column prop="name" label="用户名"></el-table-column>
          <!--          账号状态-->
          <el-table-column prop="status" label="状态">
            <template #default="scope">
              <el-tag v-if="scope.row.status!=1" type="success">正常</el-tag>
              <el-tag v-else type="danger">禁用</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="手机号"></el-table-column>
          <el-table-column prop="email" label="邮箱"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
          <el-table-column fixed="right" label="操作按钮" min-width="120">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="handleClick('查看', scope.row)">查看</el-button>
              <el-button link type="primary" size="small" @click="handleClick('编辑', scope.row)">编辑</el-button>
              <el-button link type="primary" size="small" @click="handleClick('删除',scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>


      </div>
      <div class="user_page">
        <el-pagination
            v-model:current-page="pageData.currentPage"
            v-model:page-size="pageData.pageSize"
            :page-sizes="[1, 5,10, 20]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
  <el-dialog
      v-model="dialogData.dialogVisible"
      :title="dialogData.title"
      width="500"
      :before-close="dialogData.handleClose"
  >
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="用户名">
        <el-input v-model="form.name"
                  :disabled="dialogData.disabled"
        ></el-input>
      </el-form-item>
      <el-form-item label="用户密码">
        <el-input v-model="form.password"
                  show-password
                  type="password"
                  :disabled="dialogData.disabled"
        ></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="form.email"
                  :disabled="dialogData.disabled"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮箱:">
        <el-input v-model="form.phone"
                  :disabled="dialogData.disabled"
        ></el-input>
      </el-form-item>
      <el-form-item label="地址:">
        <el-input v-model="form.address"
                  :disabled="dialogData.disabled"
        ></el-input>
      </el-form-item>
      <el-form-item label="用户状态:">
        <el-radio-group v-model="form.status"
                        :disabled="dialogData.disabled"
        >
          <el-radio :value="1">禁用</el-radio>
          <el-radio :value="2">启用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogData.handleClick" v-if="!dialogData.disabled">确定</el-button>
        <el-button type="primary" @click="dialogData.dialogVisible=false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.user {
  width: 100%;
  display: flex;
  flex-direction: column;

  .user_search {
    width: 300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .user_main {
    width: 100%;
    height: 100%;

    .user_table {
      width: 100%;

    }

    .user_page {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
    }
  }
}

</style>
